<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript">     
        //--- conf_mod();

    $(function() {  
        
        var controlador =$("#controlador").val(); 
    
        $( "#lnk_agregar" ).click(function() {
            $( "#divInsert" ).dialog( "open" );
        }); 
        
        $(document).on("click",".link_editar",function(){
            var $div = $( "#divUpdate" );
            var id = $(this).closest("tr").attr("id");
            $.ajax({ type: "POST",
                    url: "../controlador/"+controlador+".php",
                    dataType: 'json',
                    data: "OPERACION=selectById&id="+id+"&controlador="+controlador,
                    cache : false,
                    success: function(item){
                        if(item.hasOwnProperty("error")){
                            showPopupBoxMessage(item.error);
                        }else{                            
                            $div.find("#id").val(item.id);
                            $div.find("#codMaeOperacionPuerto").val(item.codMaeOperacionPuerto);
                            $div.find("#nombreMaeOperacionPuerto").val(item.nombreMaeOperacionPuerto);                            
                            $div.find("#descripcion").val(item.descripcion);                            
                            //--- chequeo o deschequeo segun sea el caso
                            var e=document.getElementById('divUpdate').getElementsByTagName('*');
                            for (var i=0;i<e.length;i++){
                                if(e[i].hasAttribute('id')){
                                    if(e[i].id=="activo"){
                                        e[i].checked = (item.activo==="t"?true:false);
                                        //alert(e[i].checked);                                        
                                    }
                                }
                            }
                            $div.dialog( "open" );                            
                        }
                    },error :function(request, status, error){
                        showPopupBoxMessage(error);
                    }
                });
        });        
    });

        function getNewRow(div){
            var id  = div.find( "#id" );  
            var codigo  = div.find( "#codMaeOperacionPuerto" );
            var nombre  = div.find( "#nombreMaeOperacionPuerto" );   
            var descripcion  = div.find( "#descripcion" );   
            return "<tr id='" + id.val() + "'>" +
                      "<td><a href='#' class='link_editar'>" + codigo.val() + "</a></td>" +
                      "<td>" + nombre.val() + "</td>" +
                      "<td>" + descripcion.val() + "</td>" +
                      "<td><b>" + (div.find('#activo').is(':checked') ? "<span style='color: rgb(14,51,22)'>SI</span>" : "<span style='color: rgb(184,35,35)'>NO</span>") + "</td>" +
                      "<td><img class='icon-remove' id='icon-remove' src='../recursos/imagenes/remove.png' title='Eliminar el Registro'></td>" +
                    "</tr>";
        }
        </script>
        
        <style></style>
    </head>
    <body>
        
        <div id='main'>
        <header>Puertos de Operaciones</header>
        <input type="hidden" id="controlador" name="controlador" value="MaeOperacionPuerto"/>
    
        <div id="divBuscador" class="redondeado gris izquierda">
           <br>
           <ul id="contenidoBuscador">
               <li>&nbsp;&nbsp;&nbsp;&nbsp;</li>
               <li><label>Filtrar y Ordenar por: </label></li>
               <li><select id="selectFiltroOrdenGrilla" name='selectFiltroOrdenGrilla' ></select></li>
               <li><label>&nbsp;&nbsp;Valor:</label></li>
               <li><input type='text' id="valorFiltroGrilla" name="valorFiltroGrilla" onchange="$('#valorFiltroGrilla').val($('#valorFiltroGrilla').val().replace(/[^\w\s]/gi, ''));"/></li>
               <li>&nbsp;&nbsp;<a href='#' class='botonRealizarBusqueda'><i class="icon-search"></i>Buscar</a></li>               
               <li>&nbsp;&nbsp;&nbsp;&nbsp;</li>               
           </ul>
        </div>
        
        <div style="clear: both;"></div> 
        <div id="generalerror"></div>
        <div id="grilla">
            <div id="agregar" class='derecha'>
                    <a id="lnk_agregar"><i class="icon-plus-sign-alt"></i> Agregar</a>
            </div>
           <div style="clear: both;"></div> 
            <div id="resultados" >
                <table id="MaeOperacionPuerto" class="grilla">
                    <tr id='cabecera'>
                        <td class="TD_filtrable" value="codMaeOperacionPuerto">Codigo</td>
                        <td class="TD_filtrable" value="nombreMaeOperacionPuerto">Nombre</td>
                        <td class="TD_filtrable" value="descripcion">Descripcion</td>
                        <td class="TD_filtrable td_activo_otros" value="activo">Activo</td>
                        <td class="td_acciones_otros">Acciones</td>
                    </tr>
                </table>
                <div class="pagination-centered" id="divPaginacion"> 
                    <input type="HIDDEN" id="paginaActual" name="paginaActual" VALUE="0"/> 
                    <input type="HIDDEN" id="totalPaginas" name="totalPaginas" VALUE="0"/> 
                    <input type="HIDDEN" id="registrosPorPagina" name="registrosPorPagina" VALUE="-1"/> 
                        <ul class="pagination"> 
                            <li><img class="paginacion_begin" id="paginacion_begin" src="../recursos/imagenes/begin.png" style="opacity:0.3" disabled="true"></li> 
                            <li><img class="paginacion_prev" id="paginacion_prev" src="../recursos/imagenes/previous.png" style="opacity:0.3" disabled="true"></li> 
                            <li class="unavailable"><a href="">&hellip;</a></li> 
                            <li class="unavailable"><label id="labelPagina">Pagina 1</label></li>
                            <li class="unavailable"><a href="">&hellip;</a></li> 
                            <li><img class="paginacion_next" id="paginacion_next" src="../recursos/imagenes/next.png"></li>
                            <li><img class="paginacion_end" id="paginacion_end" src="../recursos/imagenes/end.png"></li> 
                        </ul> 
                </div>
            </div>  
        </div>
        </div>
        <div id="divInsert" class="popout" title="Nuevo Puerto de Operacion">
        <form id="frmInsert">
            <input type="HIDDEN" id="OPERACION" name="OPERACION" VALUE="insert"/>
            <input type="HIDDEN" id="id" name="id"/>
            <table>
                <tr>
                    <td>Codigo</td>
                    <td><input type="text" id="codMaeOperacionPuerto" name="codMaeOperacionPuerto" /></td>
                </tr>
                <tr>
                    <td>Nombre</td>
                    <td><input type="text" id="nombreMaeOperacionPuerto" name="nombreMaeOperacionPuerto" /></td>
                </tr>                
                <tr>
                    <td>Descripcion</td>
                    <td><input type="text" id="descripcion" name="descripcion" /></td>
                </tr>                
                <tr>
                    <td>Activo</td>
                    <td><input type="checkbox" id='activo' name='activo' checked="checked"/> </td>
                </tr>                                               
            </table>
            <div id="errormessage"></div>
        </form>
        </div>
        
        <div id="divUpdate" class="popout" title="Editar Puerto de Operacion">
        <form id="frmUpdate">
            <table>
                <tr>
                    <td>Codigo</td>
                    <td><input type="text" id="codMaeOperacionPuerto" name="codMaeOperacionPuerto" />
                        <input type="HIDDEN" id="OPERACION" name="OPERACION" VALUE="update"/>
                    <input type="HIDDEN" id="id" name="id" VALUE=""/></td>
                </tr>
                <tr>
                    <td>Nombre</td>
                    <td><input type="text" id="nombreMaeOperacionPuerto" name="nombreMaeOperacionPuerto" /></td>
                </tr>                
                <tr>
                    <td>Descripcion</td>
                    <td><input type="text" id="descripcion" name="descripcion" /></td>
                </tr>                
                <tr>
                    <td>Activo</td>
                    <td><input type="checkbox" id='activo' name='activo'/> </td>
                </tr>                                               
            </table>
            <div id="errormessage"></div>
        </form>
        </div>
    </body>
    <script type="text/javascript">
        cargarOpcionesSelectFiltroDesdeGrilla(
             $("#selectFiltroOrdenGrilla")  //--- Select en el que se cargaran las opciones
            ,$("#"+$("#controlador").val()) //--- TABLA desde la cual se tomaran las opciones (cabecera)
        );
        inicializarPaginacionGrilla(
             $("#controlador").val()    //--- Nombre de la DBtable correspondiente a la grilla
            ,"divPaginacion"            //--- Div en el que maneja la paginacion
            ,""                         //--- Where Section
            ,-1                         //--- Registros por pagina (Cuando es "-1" toma los registros por pagina que se indican en el parametro del sistema)
        );
        cargarDatosGrillaDesdeControlador(
             $("#controlador").val()    //--- idTabla
            ,$("#controlador").val()    //--- controlador
            ,"selectAllHTMLTableFormat" //--- Operacion
            ,""                         //--- Campos adicionales
            ,$("#divPaginacion").find("#paginaActual").val()            //--- Pagina actual
            ,$("#divPaginacion").find("#registrosPorPagina").val()      //-- Registros por pagina
            ,$("#divBuscador").find("#selectFiltroOrdenGrilla").val()   //-- Campo por el cual se hara el filtro
            ,$("#divBuscador").find("#valorFiltroGrilla").val()         //-- Valor con el cual se hara el filtro
        );
    </script>
</html>
